<template>
  <div class="fullheight">
    <el-dialog
      width="55%"
      top="6vh"
      title="排课属性"
      class="sp-manager__dialog"
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      :before-close="beforeCloseDialog"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form :model="formData" v-form data-vv-scope="propertyManagerForm">
        <el-row>
          <ht-form-item label="名称">
            <ht-input
              v-model="formData.mc"
              placeholder="请输入名称"
              :validate="{required: true}"
              display-style="block"
            ></ht-input>
          </ht-form-item>
        </el-row>
        <el-row>
          <ht-form-item label="别名">
            <ht-input
              v-model="formData.bm"
              placeholder="请输入别名"
              :validate="{required: true}"
              display-style="block"
              :disabled="formData.pksxid"
            ></ht-input>
          </ht-form-item>
        </el-row>
        <el-row>
          <ht-form-item label="默认值">
            <ht-input
              v-model="formData.mrz"
              placeholder="请输入默认值"
              display-style="block"
            ></ht-input>
          </ht-form-item>
        </el-row>
        <el-row>
          <ht-form-item label="控件类型">
            <ht-select
              v-model="formData.kjlx"
              :options="controlTypeList"
              :validate="{required: true}"
              placeholder="请选择"
              display-style="block"
            />
          </ht-form-item>
        </el-row>
        <template v-if="formData.kjlx == 'number'">
          <ht-form-item label="最大值">
            <ht-input
              v-model="settingConfig.max"
              type="number"
              display-style="block"
            ></ht-input>
          </ht-form-item>
          <ht-form-item label="最小值">
            <ht-input
              v-model="settingConfig.min"
              type="number"
              display-style="block"
            ></ht-input>
          </ht-form-item>
        </template>
        <el-row>
          <ht-form-item label="分组">
            <ht-select
              v-model="formData.fz"
              :options="groupList"
              :validate="{required: true}"
              placeholder="请选择"
              display-style="block"
            />
          </ht-form-item>
        </el-row>
        <ht-form-item label="是否必填">
          <el-switch v-model="settingConfig.required"></el-switch>
        </ht-form-item>
        <el-row v-show="formData.kjlx == 'select'">
          <el-col :span="12">
            <ht-form-item label="控件配置">
              <table
                class="form-table choiceType-table"
                cellspacing="0"
                cellpadding="0"
                border="0"
              >
                <tbody>
                  <tr>
                    <td>选项值</td>
                    <td>选项标签</td>
                    <td>
                      操作
                      <el-button
                        class="btn-padding"
                        icon="el-icon-plus"
                        @click="
                          settingConfig.options.push({key: '', value: ''})
                        "
                      ></el-button>
                    </td>
                  </tr>
                  <tr
                    v-for="(item, index) in settingConfig.options"
                    :key="index"
                  >
                    <td>
                      <el-input
                        size="mini"
                        placeholder="选项值"
                        v-model="item.key"
                      ></el-input>
                    </td>
                    <td>
                      <el-input
                        size="mini"
                        placeholder="选项标签"
                        :title="item.value"
                        v-model="item.value"
                      ></el-input>
                    </td>
                    <td style="text-align: center">
                      <el-button
                        class="btn-padding"
                        style="margin-left: 0px"
                        icon="el-icon-delete"
                        @click="settingConfig.options.remove(item)"
                      ></el-button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row>
          <ht-form-item label="描述">
            <el-input
              v-model="formData.ms"
              type="textarea"
              placeholder="请输入描述"
              :autosize="autosize"
            ></el-input>
          </ht-form-item>
        </el-row>
      </el-form>
      <div slot="footer" style="text-align: center">
        <el-button type="primary" @click="saveData">{{
          $t('eip.common.save')
        }}</el-button>
        <el-button @click="beforeCloseDialog">{{
          $t('eip.common.cancel')
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import course from '@/api/course.js'

export default {
  data() {
    return {
      dialogVisible: false,
      formData: {
        sfmr: '1',
        bytj: '1',
        zt: '1',
        min: 0,
        max: 10,
        srkpz: ''
      },
      settingConfig: {
        min: 0,
        max: 10,
        required: false,
        options: []
      },
      saveMethod: 'POST',
      autosize: {
        minRows: 3
      },
      options: [
        {key: '1', value: '是'},
        {key: '0', value: '否'}
      ],
      statusList: [
        {key: '1', value: '启用'},
        {key: '0', value: '禁用'}
      ],
      groupList: [],
      controlTypeList: [
        {key: 'number', value: '数字'},
        {key: 'select', value: '下拉框'}
      ]
    }
  },
  mounted() {
    this.$validator = this.$root.$validator
  },
  methods: {
    showDialog(id, groupList) {
      this.groupList = groupList
      if (id) {
        course.getPropertyData(id).then(resp => {
          this.formData = resp.value
          if (!this.formData.srkpz) {
            this.settingConfig = {
              min: 0,
              max: 10,
              required: false,
              options: []
            }
          } else {
            let config = JSON.parse(this.formData.srkpz)
            // 旧数据时候，转换一下
            if (config instanceof Array) {
              this.settingConfig = {
                min: 0,
                max: 10,
                required: false,
                options: config
              }
            } else {
              this.settingConfig = JSON.parse(this.formData.srkpz)
            }
          }
          this.dialogVisible = true
        })
      } else {
        this.formData = {
          sfmr: '1',
          bytj: '1',
          zt: '1',
          min: 0,
          max: 10,
          srkpz: ''
        }
        this.dialogVisible = true
      }
    },
    beforeCloseDialog() {
      this.formData = {}
      this.dialogVisible = false
    },
    saveData() {
      let _this = this
      this.$validator.validateAll('propertyManagerForm').then(result => {
        if (result) {
          // 数字格式时，校验 默认值不能 在最大值最小值范围外
          if (
            this.formData.kjlx == 'number' &&
            this.formData.mrz &&
            (Number(this.formData.mrz) < this.settingConfig.min ||
              Number(this.formData.mrz) > this.settingConfig.max)
          ) {
            this.$message.warning('默认值不在最大最小值范围内！')
            return
          }
          this.formData.srkpz = JSON.stringify(this.settingConfig)
          course.savePropertyData(this.formData).then(resp => {
            if (resp.state) {
              this.$message.success(resp.message || '保存成功')
              this.afterSaveData()
            }
          })
        } else {
          let arr = this.$validator.errors.items.filter(
            item => item.scope == 'propertyManagerForm'
          )
          let errorLength = arr.length
          this.$message({
            showClose: true,
            message: `有${errorLength}个字段未通过校验，请正确填写表单内容。`,
            type: 'warning'
          })
        }
      })
    },
    afterSaveData() {
      setTimeout(() => {
        this.beforeCloseDialog()
        this.$parent && this.$parent.loadData({})
      }, 500)
    }
  }
}
</script>
<style lang="scss" scoped>
.sp-manager__dialog ::v-deep .el-dialog > .el-dialog__body {
  height: calc(100% - 170px);
}
.form-table {
  width: 100%;
  border-top: 1px solid #ebeef5;
  border-left: 1px solid #ebeef5;
}
.choiceType-table td {
  padding: 3px;
}
</style>
